<template>
	<div class="badge" :data-dot="dot">
		<slot></slot>
	</div>
</template>

<script>
	export default{
		props:{
			'dot':{type:Boolean}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../assets/css/base.scss';
	.badge{
		position: relative;
		display: inline-block;
		&[data-dot=true]::after{
			content: '';
			display: block;
			width: 6px;
			height: 6px;
			background: $danger;
			position: absolute;
			right: 0;
			top: 0;
			border-radius: 50%;
		}
	}
</style>
